<template>
    <div class="liquid-container" ref="container"></div>
</template>

<script>
    export default {
        name: "liquid",
        data() {
            return {
                echarts: null
            }
        },
        props: {
            config: Object
        },
        methods: {
            initEcharts() {
                let echarts = this.$echarts.init(this.$refs.container);
                let option = {
                        title: [
                            {
                                text: this.config.value + '%',
                                left: "center",
                                top: "45%",
                                textStyle: {
                                    fontWeight: "bold",
                                    fontSize: '0.8em',
                                    color: this.config.valueColor
                                },
                                subtext: this.config.level,
                                subtextStyle: {
                                    fontWeight: "bold",
                                    fontSize: '1em',
                                    color: this.config.valueColor
                                }
                            },
                            {
                                text: this.config.zh,
                                left: "center",
                                bottom: "8%",
                                textStyle: {
                                    fontWeight: "bold",
                                    fontSize: '0.8em',
                                    color: this.config.color
                                },
                                subtext: this.config.en,
                                subtextStyle: {
                                    fontWeight: "bold",
                                    fontSize: '0.8em',
                                    color: this.config.color
                                }
                            }
                        ],
                        series: [
                            {
                                type: 'liquidFill',
                                data: [this.config.value / 100],
                                radius: '70%',
                                label: {
                                    show: false
                                },
                                // 外圈线
                                outline: {
                                    show: true,
                                    borderDistance: 10,
                                    itemStyle: {
                                        borderColor: this.config.color,
                                        borderWidth: 7
                                    }
                                },
                                color: [this.config.color]
                            },
                        ]
                    };
                echarts.setOption(option);
                this.echarts = echarts;
            }
        },
        mounted() {
            this.initEcharts();
        }
    }
</script>

<style scoped>
    .liquid-container {
        width: 100%;
        height: 100%;
    }
</style>
